<!--
 * @Author: 蔡继周
 * @Date: 2021-11-16 10:55:00
 * @LastEditTime: 2021-11-19 09:20:03
 * @LastEditors: 蔡继周
 * @Description: I have to do something...
 * @FilePath: \tableTep\src\components\FormTep\itemView\radioGroup.vue
-->
<template>
  <el-form-item
    :label="column.title ? column.title + '：' : ''"
    :prop="column.name"
    :rules="rules"
  >
    <el-checkbox
      v-model="state.checkAll"
      :indeterminate="state.isIndeterminate"
      @change="
        (value) => {
          handleCheckAllChange(value, column);
        }
      "
      >Check all</el-checkbox
    >
    <el-checkbox-group
      v-model="checkedOptions"
      @change="
        (value) => {
          handlecheckedOptionsChange(value, column);
        }
      "
      v-bind="column.definProps"
    >
      <el-checkbox
        v-for="checkbox in column.options"
        :key="checkbox.id"
        :label="checkbox.id"
      >
        {{ checkbox.name }}
      </el-checkbox>
    </el-checkbox-group>
  </el-form-item>
</template>
<script setup>
import { computed, reactive } from "vue";
import useComputedRule from "./../hooks/useComputedRule";
const emit = defineEmits(["update:model"]);

const props = defineProps({
  column: {
    type: Object,
    default: () => {},
  },
  model: {
    type: Array,
    default: () => [],//对象数组利于扩展
  },
});
const { rules } = useComputedRule(props);

const cityOptionsIdList = computed(() => {
  return JSON.parse(JSON.stringify(props.column.options.map((v) => v.id)));
});

const state = reactive({
  checkAll: true,
  isIndeterminate: false,
});
// 总开关发生变化时根据当时是否全选去改变总开关，子开关状态，是否半选去返回选中数据
const handleCheckAllChange = (val, item) => {
  if (val && state.isIndeterminate) {
    state.checkAll = true;
    state.isIndeterminate = false;
    checkedOptions.value = cityOptionsIdList.value;
  }
  if (val && !state.isIndeterminate) {
    state.checkAll = true;
    checkedOptions.value = cityOptionsIdList.value;
  }
  if (!val && state.isIndeterminate) {
    state.checkAll = true;
    state.isIndeterminate = false;
    checkedOptions.value = cityOptionsIdList.value;
  }
  if (!val && !state.isIndeterminate) {
    state.checkAll = false;
    state.isIndeterminate = false;
    checkedOptions.value = [];
  }
  if (item.change && typeof item.change === "function") {
    setTimeout(() => {
      item.change(checkedOptions.value);
    });
  }
};
// 总子开关发生变化时根据当时是否全选，是否半选去改变总开关，子开关状态，返回选中数据

const handlecheckedOptionsChange = (value, item) => {
  checkedOptions.value = value;
  let isHasData = value.length > 0;
  let isSame =
    checkedOptions.value.sort().toString() ===
    cityOptionsIdList.value.sort().toString();
  if (isHasData && !isSame) {
    state.checkAll = false;
    state.isIndeterminate = true;
  }
  if (isHasData && isSame) {
    state.checkAll = true;
    state.isIndeterminate = false;
  }
  if (!isHasData && !isSame) {
    state.checkAll = false;
    state.isIndeterminate = false;
  }
  if (item.change && typeof item.change === "function") {
    item.change(value);
  }
};
const checkedOptions = computed({
  get: () => props.model,
  set: (val) => {
    emit("update:model", val);
  },
});
</script>
